<template>
  <div class="promotion-container">
    <!-- 引入公共头部 -->
    <CommonHeader />
      <!-- 页面内容 -->
    <div class="promotion-content">
      <!-- 标题和发布按钮 -->
      <div class="promotion-header">
        <div class="promotion-title">
          <n-h1>推广活动专区</n-h1>
          <n-text depth="3">发现最新的健身活动、器材优惠和教练课程</n-text>
        </div>
        <div class="publish-button-container">
          <n-button type="primary" size="large" @click="showPublishModal = true">
            <template #icon>
              <n-icon><AddCircleOutline /></n-icon>
            </template>
            发布活动
          </n-button>
        </div>
      </div>
      
      <!-- 大型轮播图 -->
      <div class="carousel-container">
        <n-carousel
          effect="card"
          prev-slide-style="transform: translateX(-150%) translateZ(-800px);"
          next-slide-style="transform: translateX(50%) translateZ(-800px);"
          style="height: 320px"
          :show-dots="false"
          autoplay
          :interval="5000"
        >
          <n-carousel-item v-for="(slide, index) in featuredPromotions" :key="index" :style="{ width: '60%' }">
            <div class="carousel-card">
              <img class="carousel-img" :src="slide.image" />
              <div class="carousel-overlay">
                <div class="carousel-content">
                  <n-h3>{{ slide.title }}</n-h3>
                  <n-p>{{ slide.description }}</n-p>
                  <n-button type="primary" size="small" class="carousel-btn">
                    了解详情
                  </n-button>
                </div>
              </div>
            </div>
          </n-carousel-item>
        </n-carousel>
      </div>
      
      <!-- 活动分类标签 -->
      <div class="category-tabs">
        <n-tabs type="line" animated :default-value="selectedCategory" @update:value="handleCategoryChange">
          <n-tab-pane name="all" tab="全部活动" />
          <n-tab-pane name="equipment" tab="器材优惠" />
          <n-tab-pane name="course" tab="教练课程" />
          <n-tab-pane name="gym" tab="场馆活动" />
        </n-tabs>
      </div>
      
      <!-- 活动卡片列表 -->
      <div class="promotion-cards">
        <n-grid x-gap="16" y-gap="16" cols="1 s:2 m:3 l:4">
          <n-gi v-for="(promotion, index) in filteredPromotions" :key="index">
            <n-card hoverable class="promotion-card">
              <template #cover>
                <img :src="promotion.image" class="card-cover-img" />
              </template>
              
              <div class="card-meta">
                <n-space align="center" :size="8">
                  <n-avatar
                    round
                    size="small"
                    :src="promotion.publisherAvatar"
                  />
                  <n-space vertical :size="2" class="publisher-info">
                    <n-text strong>{{ promotion.publisherName }}</n-text>
                    <n-space align="center" :size="4">
                      <n-tag :bordered="false" size="small" :type="getPublisherTagType(promotion.publisherType)">
                        {{ getPublisherTypeLabel(promotion.publisherType) }}
                      </n-tag>
                      <n-text depth="3" style="font-size: 12px;">{{ formatDate(promotion.publishDate) }}</n-text>
                    </n-space>
                  </n-space>
                </n-space>
              </div>
              
              <n-h3 class="card-title">{{ promotion.title }}</n-h3>
              <n-p class="card-description">{{ promotion.description }}</n-p>
              
              <!-- 活动信息图标区 -->
              <div class="card-info">
                <n-space justify="space-between">
                  <n-space>
                    <n-space align="center" :size="4">
                      <n-icon><CalendarOutline /></n-icon>
                      <n-text>{{ promotion.duration }}</n-text>
                    </n-space>
                    <n-divider vertical />
                    <n-space align="center" :size="4">
                      <n-icon><LocationOutline /></n-icon>
                      <n-text>{{ promotion.location }}</n-text>
                    </n-space>
                  </n-space>
                  
                  <n-space>
                    <n-button text size="small">
                      <template #icon>
                        <n-icon><HeartOutline /></n-icon>
                      </template>
                      {{ promotion.likes }}
                    </n-button>
                    <n-button text size="small">
                      <template #icon>
                        <n-icon><ShareSocialOutline /></n-icon>
                      </template>
                      分享
                    </n-button>
                  </n-space>
                </n-space>
              </div>
              
              <!-- 活动标签 -->
              <div class="card-tags">
                <n-space>
                  <n-tag v-for="(tag, tagIndex) in promotion.tags" :key="tagIndex" size="small" :bordered="false">
                    {{ tag }}
                  </n-tag>
                </n-space>
              </div>
                <template #action>
                <n-button type="primary" block @click="showPromotionDetail(promotion)">
                  了解详情
                </n-button>
              </template>
            </n-card>
          </n-gi>
        </n-grid>
      </div>
        <!-- 分页 -->
      <div class="pagination-container">
        <n-pagination v-model:page="currentPage" :page-count="10" />
      </div>    </div>

    <!-- 活动详情弹窗 -->
    <n-modal 
      v-model:show="showDetailModal" 
      preset="card" 
      :style="{ width: '800px', maxWidth: '95vw' }"
      title="活动详情"
      size="large"
      :mask-closable="true"
    >
      <div v-if="selectedPromotion" class="detail-content">
        <!-- 活动封面图 -->
        <div class="detail-image">
          <img :src="selectedPromotion.image" alt="活动封面" />
        </div>
        
        <!-- 活动信息 -->
        <div class="detail-info">
          <n-h2>{{ selectedPromotion.title }}</n-h2>
          
          <!-- 发布者信息 -->
          <div class="detail-publisher">
            <n-space align="center" :size="12">
              <n-avatar
                round
                size="medium"
                :src="selectedPromotion.publisherAvatar"
              />
              <div>
                <n-text strong>{{ selectedPromotion.publisherName }}</n-text>
                <br />
                <n-tag :bordered="false" size="small" :type="getPublisherTagType(selectedPromotion.publisherType)">
                  {{ getPublisherTypeLabel(selectedPromotion.publisherType) }}
                </n-tag>
                <n-text depth="3" style="margin-left: 8px;">{{ formatDate(selectedPromotion.publishDate) }}</n-text>
              </div>
            </n-space>
          </div>
          
          <!-- 活动描述 -->
          <div class="detail-description">
            <n-h4>活动介绍</n-h4>
            <n-p>{{ selectedPromotion.description }}</n-p>
          </div>
          
          <!-- 活动详细信息 -->
          <div class="detail-meta">
            <n-grid x-gap="24" y-gap="16" cols="2">
              <n-gi>
                <n-space align="center" :size="8">
                  <n-icon size="20" color="#007bff"><CalendarOutline /></n-icon>
                  <div>
                    <n-text depth="3" style="font-size: 12px;">活动时间</n-text>
                    <br />
                    <n-text>{{ selectedPromotion.duration }}</n-text>
                  </div>
                </n-space>
              </n-gi>
              <n-gi>
                <n-space align="center" :size="8">
                  <n-icon size="20" color="#28a745"><LocationOutline /></n-icon>
                  <div>
                    <n-text depth="3" style="font-size: 12px;">活动地点</n-text>
                    <br />
                    <n-text>{{ selectedPromotion.location }}</n-text>
                  </div>
                </n-space>
              </n-gi>
            </n-grid>
          </div>
          
          <!-- 活动标签 -->
          <div class="detail-tags">
            <n-h4>活动标签</n-h4>
            <n-space>
              <n-tag v-for="(tag, tagIndex) in selectedPromotion.tags" :key="tagIndex" :bordered="false">
                {{ tag }}
              </n-tag>
            </n-space>
          </div>
            <!-- 互动统计 -->
          <div class="detail-stats">
            <n-space>
              <n-button text @click="handleLike(selectedPromotion)">
                <template #icon>
                  <n-icon><HeartOutline /></n-icon>
                </template>
                {{ selectedPromotion.likes }} 赞
              </n-button>
            </n-space>
          </div>
        </div>
      </div>
      
      <template #action>
        <n-space justify="end">
          <n-button @click="showDetailModal = false">关闭</n-button>
        </n-space>
      </template>
    </n-modal>

    <!-- 发布活动弹窗 -->
    <n-modal 
      v-model:show="showPublishModal" 
      preset="card" 
      :style="{ width: '600px', maxWidth: '90vw' }"
      title="发布推广活动"
      size="medium"
      :mask-closable="false"
    >
      <n-form ref="publishFormRef" :model="publishForm" :rules="publishRules" label-placement="top">
        <n-form-item label="活动标题" path="title">
          <n-input 
            v-model:value="publishForm.title" 
            placeholder="请输入活动标题"
            maxlength="50"
            show-count
          />
        </n-form-item>
        
        <n-form-item label="活动描述" path="description">
          <n-input 
            v-model:value="publishForm.description" 
            type="textarea" 
            placeholder="请详细描述活动内容"
            :autosize="{ minRows: 3, maxRows: 5 }"
            maxlength="200"
            show-count
          />
        </n-form-item>
        
        <n-grid x-gap="16" cols="2">
          <n-gi>
            <n-form-item label="活动类型" path="category">
              <n-select 
                v-model:value="publishForm.category" 
                placeholder="选择活动类型"
                :options="categoryOptions"
              />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="发布者类型" path="publisherType">
              <n-select 
                v-model:value="publishForm.publisherType" 
                placeholder="选择发布者类型"
                :options="publisherTypeOptions"
              />
            </n-form-item>
          </n-gi>
        </n-grid>
        
        <n-grid x-gap="16" cols="2">
          <n-gi>
            <n-form-item label="活动时间" path="duration">
              <n-input 
                v-model:value="publishForm.duration" 
                placeholder="如：7月15日-8月15日"
              />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="活动地点" path="location">
              <n-input 
                v-model:value="publishForm.location" 
                placeholder="如：线上活动或具体地址"
              />
            </n-form-item>
          </n-gi>
        </n-grid>
          <n-form-item label="活动封面图" path="image">
          <n-upload
            ref="uploadRef"
            :max="1"
            accept="image/*"
            list-type="image-card"
            :on-before-upload="handleImageUpload"
            :on-remove="handleImageRemove"
          >
            <n-upload-dragger>
              <div class="upload-content">
                <n-icon size="48" :depth="3" class="upload-icon">
                  <ImageOutline />
                </n-icon>
                <div class="upload-text">
                  <n-text style="font-size: 16px; font-weight: 500;">
                    点击或拖动图片到此区域上传
                  </n-text>
                  <n-text depth="3" style="font-size: 14px; margin-left: 8px;">
                    支持 JPG、PNG 格式，建议尺寸 800x600px
                  </n-text>
                </div>
              </div>
            </n-upload-dragger>
          </n-upload>
        </n-form-item>
        
        <n-form-item label="活动标签" path="tags">
          <n-dynamic-tags v-model:value="publishForm.tags" />
        </n-form-item>
      </n-form>
      
      <template #action>
        <n-space justify="end">
          <n-button @click="handlePublishCancel">取消</n-button>
          <n-button type="primary" @click="handlePublishSubmit" :loading="publishLoading">
            发布活动
          </n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useMessage } from 'naive-ui';
import CommonHeader from '../../components/CommonHeader.vue';
import {
  CalendarOutline,
  LocationOutline,
  HeartOutline,
  ShareSocialOutline,
  AddCircleOutline,
  ImageOutline,
} from '@vicons/ionicons5';

const message = useMessage();

// 当前页和分类
const currentPage = ref(1);
const selectedCategory = ref('all');

// 发布弹窗相关
const showPublishModal = ref(false);
const publishLoading = ref(false);
const publishFormRef = ref(null);

// 详情弹窗相关
const showDetailModal = ref(false);
const selectedPromotion = ref(null);

// 发布表单数据
const publishForm = ref({
  title: '',
  description: '',
  category: '',
  publisherType: '',
  duration: '',
  location: '',
  image: '',
  tags: []
});

// 表单验证规则
const publishRules = {
  title: [
    { required: true, message: '请输入活动标题', trigger: 'blur' },
    { min: 5, max: 50, message: '标题长度应在5-50字符之间', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入活动描述', trigger: 'blur' },
    { min: 10, max: 200, message: '描述长度应在10-200字符之间', trigger: 'blur' }
  ],
  category: [
    { required: true, message: '请选择活动类型', trigger: 'change' }
  ],
  publisherType: [
    { required: true, message: '请选择发布者类型', trigger: 'change' }
  ],
  duration: [
    { required: true, message: '请输入活动时间', trigger: 'blur' }
  ],
  location: [
    { required: true, message: '请输入活动地点', trigger: 'blur' }
  ]
};

// 下拉选项
const categoryOptions = [
  { label: '器材优惠', value: 'equipment' },
  { label: '教练课程', value: 'course' },
  { label: '场馆活动', value: 'gym' }
];

const publisherTypeOptions = [
  { label: '器械商家', value: 'merchant' },
  { label: '健身教练', value: 'coach' },
  { label: '健身场馆', value: 'gym' }
];

// 处理图片上传
const handleImageUpload = (data) => {
  const file = data.file;
  const isImage = file.type.startsWith('image/');
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    message.error('只能上传图片文件！');
    return false;
  }
  if (!isLt2M) {
    message.error('图片大小不能超过 2MB！');
    return false;
  }

  // 创建预览URL
  const reader = new FileReader();
  reader.onload = (e) => {
    publishForm.value.image = e.target.result;
  };
  reader.readAsDataURL(file);
  
  return false; // 阻止自动上传
};

// 处理图片移除
const handleImageRemove = () => {
  publishForm.value.image = '';
};

// 处理发布提交
const handlePublishSubmit = async () => {
  if (!publishFormRef.value) return;
  
  try {
    await publishFormRef.value.validate();
    publishLoading.value = true;
    
    // 模拟提交延迟
    await new Promise(resolve => setTimeout(resolve, 1500));
    
    // 创建新的活动数据
    const newPromotion = {
      title: publishForm.value.title,
      description: publishForm.value.description,
      image: publishForm.value.image || 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80',
      publisherName: '当前用户', // 实际项目中应从用户信息获取
      publisherType: publishForm.value.publisherType,
      publisherAvatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel&seed=new',
      publishDate: new Date(),
      duration: publishForm.value.duration,
      location: publishForm.value.location,
      likes: 0,
      tags: publishForm.value.tags,
      category: publishForm.value.category
    };
    
    // 添加到活动列表开头
    promotions.value.unshift(newPromotion);
    
    message.success('活动发布成功！');
    handlePublishCancel();
    
  } catch (error) {
    console.error('表单验证失败:', error);
  } finally {
    publishLoading.value = false;
  }
};

// 处理发布取消
const handlePublishCancel = () => {
  showPublishModal.value = false;
  // 重置表单
  publishForm.value = {
    title: '',
    description: '',
    category: '',
    publisherType: '',
    duration: '',
    location: '',
    image: '',
    tags: []
  };
  publishFormRef.value?.restoreValidation();
};

// 显示活动详情
const showPromotionDetail = (promotion) => {
  selectedPromotion.value = promotion;
  showDetailModal.value = true;
};

// 处理点赞
const handleLike = (promotion) => {
  promotion.likes++;
  message.success('点赞成功！');
};

// 轮播图数据
const featuredPromotions = ref([
  {
    title: '夏季健身器械特惠',
    description: '全场器械8折起，限时抢购',
    image: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
  },
  {
    title: '健身教练训练营',
    description: '专业教练一对一指导，助你打造完美身材',
    image: 'https://images.unsplash.com/photo-1599058917212-d750089bc07e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80',
  },
  {
    title: '高级场馆会员招募',
    description: '豪华健身房设施，舒适环境，限时折扣',
    image: 'https://images.unsplash.com/photo-1540497077202-7c8a3999166f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
  },
  {
    title: '新品器械体验日',
    description: '最新智能健身器材，免费体验活动',
    image: 'https://images.unsplash.com/photo-1598289431512-b97b0917afae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
  },
]);

// 活动数据
const promotions = ref([
  {
    title: '智能跑步机新品首发',
    description: '最新一代智能跑步机，搭载AI姿势矫正系统，限时9折优惠',
    image: 'https://images.unsplash.com/photo-1596357395217-80de13130e92?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80',
    publisherName: '未来健身器材',
    publisherType: 'merchant',
    publisherAvatar: 'https://xsgames.co/randomusers/avatar.php?g=male&seed=1',
    publishDate: new Date(2023, 6, 15),
    duration: '7月15日-8月15日',
    location: '线上活动',
    likes: 128,
    tags: ['跑步机', '智能器械', '限时优惠'],
    category: 'equipment'
  },
  {
    title: '暑期健身训练营',
    description: '专业教练指导，科学训练计划，为期30天的身体改造',
    image: 'https://images.unsplash.com/photo-1549060279-7e168fcee0c2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    publisherName: '王教练',
    publisherType: 'coach',
    publisherAvatar: 'https://xsgames.co/randomusers/avatar.php?g=male&seed=2',
    publishDate: new Date(2023, 6, 10),
    duration: '8月1日-8月30日',
    location: '星光健身中心',
    likes: 256,
    tags: ['训练营', '减脂', '增肌'],
    category: 'course'
  },
  {
    title: '健身房开业大酬宾',
    description: '豪华健身房盛大开业，首月会员5折，赠送价值2000元健身大礼包',
    image: 'https://images.unsplash.com/photo-1570829460005-c840387bb1ca?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80',
    publisherName: '光明健身中心',
    publisherType: 'gym',
    publisherAvatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel&seed=3',
    publishDate: new Date(2023, 6, 5),
    duration: '7月20日-8月20日',
    location: '光明区中心广场',
    likes: 315,
    tags: ['新店开业', '会员优惠', '礼包'],
    category: 'gym'
  },
  {
    title: '二手健身器材特卖会',
    description: '精选二手健身器材，品质保证，价格优惠，送货上门',
    image: 'https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    publisherName: '健身器材回收站',
    publisherType: 'merchant',
    publisherAvatar: 'https://xsgames.co/randomusers/avatar.php?g=female&seed=4',
    publishDate: new Date(2023, 6, 1),
    duration: '7月5日-7月25日',
    location: '线上+线下',
    likes: 96,
    tags: ['二手器材', '特卖会', '优惠'],
    category: 'equipment'
  },
  {
    title: '瑜伽体式专修班',
    description: '资深瑜伽教练指导，从基础到进阶，全方位提升瑜伽水平',
    image: 'https://images.unsplash.com/photo-1588286840104-8957b019727f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    publisherName: '李教练',
    publisherType: 'coach',
    publisherAvatar: 'https://xsgames.co/randomusers/avatar.php?g=female&seed=5',
    publishDate: new Date(2023, 5, 25),
    duration: '每周六日',
    location: '和平瑜伽馆',
    likes: 187,
    tags: ['瑜伽', '专修班', '初学者'],
    category: 'course'
  },
  {
    title: '游泳健身套餐',
    description: '健身+游泳双重体验，舒适环境，专业指导',
    image: 'https://images.unsplash.com/photo-1560089000-7433a4ebbd64?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    publisherName: '蓝水健身游泳馆',
    publisherType: 'gym',
    publisherAvatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel&seed=6',
    publishDate: new Date(2023, 5, 20),
    duration: '长期有效',
    location: '蓝水健身中心',
    likes: 143,
    tags: ['游泳', '健身', '套餐'],
    category: 'gym'
  },
  {
    title: '家用哑铃套装促销',
    description: '多重量可调节哑铃，满足不同训练需求，送训练手套',
    image: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    publisherName: '健力器材专卖',
    publisherType: 'merchant',
    publisherAvatar: 'https://xsgames.co/randomusers/avatar.php?g=male&seed=7',
    publishDate: new Date(2023, 5, 15),
    duration: '6月15日-7月15日',
    location: '线上商城',
    likes: 76,
    tags: ['哑铃', '家用器材', '促销'],
    category: 'equipment'
  },
  {
    title: '功能性训练工作坊',
    description: '掌握科学的功能性训练方法，提高运动效率和身体素质',
    image: 'https://images.unsplash.com/photo-1574680096145-d05b474e2155?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80',
    publisherName: '张教练',
    publisherType: 'coach',
    publisherAvatar: 'https://xsgames.co/randomusers/avatar.php?g=male&seed=8',
    publishDate: new Date(2023, 5, 10),
    duration: '7月8日-7月9日',
    location: '阳光健身学院',
    likes: 208,
    tags: ['功能性训练', '工作坊', '专业'],
    category: 'course'
  }
]);

// 根据选择的分类过滤活动
const filteredPromotions = computed(() => {
  if (selectedCategory.value === 'all') {
    return promotions.value;
  }
  return promotions.value.filter(p => p.category === selectedCategory.value);
});

// 处理分类变化
const handleCategoryChange = (category) => {
  selectedCategory.value = category;
  currentPage.value = 1; // 重置页码
};

// 获取发布者类型标签
const getPublisherTypeLabel = (type) => {
  switch (type) {
    case 'merchant': return '器械商家';
    case 'coach': return '健身教练';
    case 'gym': return '健身场馆';
    default: return '用户';
  }
};

// 获取发布者标签类型
const getPublisherTagType = (type) => {
  switch (type) {
    case 'merchant': return 'success';
    case 'coach': return 'info';
    case 'gym': return 'warning';
    default: return 'default';
  }
};

// 格式化日期
const formatDate = (date) => {
  const now = new Date();
  const diff = Math.floor((now - date) / (1000 * 60 * 60 * 24));
  
  if (diff === 0) {
    return '今天';
  } else if (diff === 1) {
    return '昨天';
  } else if (diff < 30) {
    return `${diff}天前`;
  } else {
    return `${date.getMonth() + 1}月${date.getDate()}日`;
  }
};
</script>

<style scoped>
.promotion-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.promotion-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.promotion-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 20px 0 30px;
  flex-wrap: wrap;
  gap: 20px;
}

.promotion-title {
  flex: 1;
  min-width: 300px;
}

.promotion-title h1 {
  margin-bottom: 8px;
}

.publish-button-container {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .promotion-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .promotion-title {
    min-width: auto;
  }
  
  .publish-button-container {
    width: 100%;
  }
  
  .publish-button-container .n-button {
    width: 100%;
  }
}

.carousel-container {
  margin-bottom: 40px;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.carousel-card {
  position: relative;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.carousel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  padding: 20px;
  color: white;
}

.carousel-content h3 {
  color: white;
  margin-bottom: 8px;
}

.carousel-content p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 12px;
}

.carousel-btn {
  background-color: var(--primary-color);
  border: none;
}

.category-tabs {
  margin-bottom: 24px;
}

.promotion-cards {
  margin-bottom: 40px;
}

.promotion-card {
  height: 100%;
  transition: transform 0.3s ease;
}

.promotion-card:hover {
  transform: translateY(-5px);
}

.card-cover-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-meta {
  margin: 16px 0;
}

.publisher-info {
  line-height: 1.2;
}

.card-title {
  margin: 8px 0;
  font-size: 18px;
  line-height: 1.4;
}

.card-description {
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-info {
  margin-bottom: 16px;
  font-size: 13px;
}

.card-tags {
  margin-bottom: 16px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin: 40px 0 20px;
}

/* 上传区域样式 */
.upload-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
}

.upload-icon {
  flex-shrink: 0;
}

.upload-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 活动详情弹窗样式 */
.detail-content {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-image {
  width: 100%;
  margin-bottom: 20px;
}

.detail-image img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

.detail-info {
  padding: 0 4px;
}

.detail-publisher {
  margin: 16px 0 24px;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.detail-description {
  margin-bottom: 24px;
}

.detail-meta {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.detail-tags {
  margin-bottom: 24px;
}

.detail-stats {
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
}
</style>
